<p align="center">
<img src="https://user-images.githubusercontent.com/2666735/30651452-58ae6c88-9deb-11e7-9e13-6beae3f6c54c.png" alt="Meting">
</p>

<p align="center">
<a href="https://i-meto.com"><img alt="Author" src="https://img.shields.io/badge/Author-METO-blue.svg?style=flat-square"/></a>
<a href="https://www.npmjs.com/package/meting"><img alt="Version" src="https://img.shields.io/npm/v/meting.svg?style=flat-square"/></a>
<a href="https://travis-ci.org/metowolf/MetingJS"><img alt="Travis" src="https://img.shields.io/travis/metowolf/MetingJS.svg?style=flat-square"></a>
<img alt="License" src="https://img.shields.io/npm/l/meting.svg?style=flat-square"/>
</p>

<h2 id="Requirement"><a href="#Requirement" class="headerlink" title="Requirement"></a>Requirement</h2><p><a href="https://github.com/MoePlayer/APlayer">https://github.com/MoePlayer/APlayer</a></p>
<table>
<thead>
<tr>
<th>Version</th>
<th>API Status</th>
<th>APlayer</th>
</tr>
</thead>
<tbody><tr>
<td>1.2.x</td>
<td>Supported</td>
<td><a href="https://github.com/MoePlayer/APlayer"><img src="https://img.shields.io/badge/APlayer-^1.10.0-green.svg?longCache=true&style=for-the-badge"></a></td>
</tr>
<tr>
<td>2.0.x</td>
<td>Latest</td>
<td><a href="https://github.com/MoePlayer/APlayer"><img src="https://img.shields.io/badge/APlayer-^1.10.0-green.svg?longCache=true&style=for-the-badge"></a></td>
</tr>
</tbody></table>
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><ul>
<li><a href="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js">https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js</a></li>
<li><a href="https://unpkg.com/meting@2.0.1/dist/Meting.min.js">https://unpkg.com/meting@2.0.1/dist/Meting.min.js</a></li>
</ul>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><pre><code class="html">&lt;!-- require APlayer --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- require MetingJS --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js&quot;&gt;&lt;/script&gt;

&lt;meting-js
    server=&quot;netease&quot;
    type=&quot;playlist&quot;
    id=&quot;60198&quot;&gt;
&lt;/meting-js&gt;
</code></pre>
<p><a href="https://music.163.com/#/playlist?id=60198">https://music.163.com/#/playlist?id=60198</a></p>
<pre><code class="html">&lt;meting-js
    auto=&quot;https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html&quot;&gt;
&lt;/meting-js&gt;
</code></pre>
<p><a href="https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html">https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html</a></p>
<pre><code class="html">&lt;meting-js
    name=&quot;rainymood&quot;
    artist=&quot;rainymood&quot;
    url=&quot;https://rainymood.com/audio1110/0.m4a&quot;
    cover=&quot;https://rainymood.com/i/badge.jpg&quot;&gt;
&lt;/meting-js&gt;
</code></pre>
<p>for self-hosted media</p>
<pre><code class="html">&lt;meting-js
    name=&quot;rainymood&quot;
    artist=&quot;rainymood&quot;
    url=&quot;https://rainymood.com/audio1110/0.m4a&quot;
    cover=&quot;https://rainymood.com/i/badge.jpg&quot;
    fixed=&quot;true&quot;&gt;
    &lt;pre hidden&gt;
        [00:00.00]This
        [00:04.01]is
        [00:08.02]lyric
    &lt;/pre&gt;
&lt;/meting-js&gt;
</code></pre>
<p>Fixed mode with Lyric text</p>
<h2 id="Option"><a href="#Option" class="headerlink" title="Option"></a>Option</h2><table>
<thead>
<tr>
<th align="left">option</th>
<th align="center">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody><tr>
<td align="left">id</td>
<td align="center"><strong>require</strong></td>
<td align="left">song id / playlist id / album id / search keyword</td>
</tr>
<tr>
<td align="left">server</td>
<td align="center"><strong>require</strong></td>
<td align="left">music platform: <code>netease</code>, <code>tencent</code>, <code>kugou</code>, <code>xiami</code>, <code>baidu</code></td>
</tr>
<tr>
<td align="left">type</td>
<td align="center"><strong>require</strong></td>
<td align="left"><code>song</code>, <code>playlist</code>, <code>album</code>, <code>search</code>, <code>artist</code></td>
</tr>
<tr>
<td align="left">auto</td>
<td align="center">options</td>
<td align="left">music link, support: <code>netease</code>, <code>tencent</code>, <code>xiami</code></td>
</tr>
<tr>
<td align="left">fixed</td>
<td align="center"><code>false</code></td>
<td align="left">enable fixed mode</td>
</tr>
<tr>
<td align="left">mini</td>
<td align="center"><code>false</code></td>
<td align="left">enable mini mode</td>
</tr>
<tr>
<td align="left">autoplay</td>
<td align="center"><code>false</code></td>
<td align="left">audio autoplay</td>
</tr>
<tr>
<td align="left">theme</td>
<td align="center"><code>#2980b9</code></td>
<td align="left">main color</td>
</tr>
<tr>
<td align="left">loop</td>
<td align="center"><code>all</code></td>
<td align="left">player loop play, values: ‘all’, ‘one’, ‘none’</td>
</tr>
<tr>
<td align="left">order</td>
<td align="center"><code>list</code></td>
<td align="left">player play order, values: ‘list’, ‘random’</td>
</tr>
<tr>
<td align="left">preload</td>
<td align="center"><code>auto</code></td>
<td align="left">values: ‘none’, ‘metadata’, ‘auto’</td>
</tr>
<tr>
<td align="left">volume</td>
<td align="center"><code>0.7</code></td>
<td align="left">default volume, notice that player will remember user setting, default volume will not work after user set volume themselves</td>
</tr>
<tr>
<td align="left">mutex</td>
<td align="center"><code>true</code></td>
<td align="left">prevent to play multiple player at the same time, pause other players when this player start play</td>
</tr>
<tr>
<td align="left">lrc-type</td>
<td align="center"><code>0</code></td>
<td align="left">lyric type</td>
</tr>
<tr>
<td align="left">list-folded</td>
<td align="center"><code>false</code></td>
<td align="left">indicate whether list should folded at first</td>
</tr>
<tr>
<td align="left">list-max-height</td>
<td align="center"><code>340px</code></td>
<td align="left">list max height</td>
</tr>
<tr>
<td align="left">storage-name</td>
<td align="center"><code>metingjs</code></td>
<td align="left">localStorage key that store player setting</td>
</tr>
</tbody></table>
<p>Documentation for APlayer can be found at <a href="https://aplayer.js.org/#/home?id=options">https://aplayer.js.org/#/home?id=options</a></p>
<h2 id="Advanced"><a href="#Advanced" class="headerlink" title="Advanced"></a>Advanced</h2><p>MetingJS allow you to use self-hosted API, <a href="https://github.com/metowolf/Meting">more information about Meting</a>.</p>
<pre><code class="html">&lt;script&gt;
var meting_api=&#39;http://example.com/api.php?server=:server&amp;type=:type&amp;id=:id&amp;auth=:auth&amp;r=:r&#39;;
&lt;/script&gt;

&lt;script src=&quot;dist/Meting.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h2 id="Browser-support"><a href="#Browser-support" class="headerlink" title="Browser support"></a>Browser support</h2><p>Browsers without <a href="https://caniuse.com/#feat=custom-elementsv1">native custom element support</a> require a <a href="https://github.com/webcomponents/custom-elements">polyfill</a>.</p>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Internet Explorer 11</li>
<li>Microsoft Edge</li>
</ul>
<h2 id="Author"><a href="#Author" class="headerlink" title="Author"></a>Author</h2><p><strong>MetingJS</strong> © <a href="https://github.com/metowolf">metowolf</a>, Released under the <a href="./LICENSE">MIT</a> License.<br></p>
<blockquote>
<p>Blog <a href="https://i-meto.com/">@meto</a> · GitHub <a href="https://github.com/metowolf">@metowolf</a> · Twitter <a href="https://twitter.com/metowolf">@metowolf</a> · Telegram Channel <a href="https://t.me/metooooo">@metooooo</a></p>
</blockquote>
